<template>
  <div class="container">
    <div class="top">
      <p class="title">登录SAE</p>
      <p class="des">验证即登录，未注册则自动创建新账号</p>
    </div>
    <div class="fields">
      <van-field v-model="login.phone" placeholder="请输入手机号码" ref="phone"/>
      <van-divider/>
      <van-field v-model="login.code" center clearable placeholder="请输入短信验证码" ref="code">
        <span slot="button" style="color: #0180FF;font-family: PingFangBlod;" @click="sendCode">{{ codeStr }}</span>
      </van-field>
      <van-divider/>
    </div>
    <div class="radio" v-if="checks">
      <div class="radio-item" @click="changeType">
        <img src="../assets/img/icon-radio.png" alt="" width="18px" v-if="login.type === '1'">
        <div class="radio-box" v-else></div>
        <span>教师</span>
      </div>
      <div class="radio-item" @click="changeType">
        <img src="../assets/img/icon-radio.png" alt="" width="18px" v-if="login.type === '2'">
        <div class="radio-box" v-else></div>
        <span>机构</span>
      </div>
    </div>
    <div class="btn">
      <van-button type="info" size="large" @click="toLogin" :loading="loading" loading-text="登录中...">登录</van-button>
    </div>
  </div>
</template>

<script>
import { validatePhone } from '../utils'

export default {
  name: 'login',
  data () {
    return {
      login: {
        phone: '',
        code: '',
        type: '1'
      },
      sendable: true,
      codeStr: '获取验证码',
      timer: null,
      count: 60,
      loading: false
    }
  },
  methods: {
    toLogin () {
      // 验证信息
      if (!validatePhone(this.login.phone)) {
        this.$toast('请输入正确的手机号码！')
        this.$refs['phone'].focus()
      } else if (!this.login.code) {
        this.$toast('请输入验证码！')
        this.$refs['code'].focus()
      } else {
        this.loading = true
        this.$emit('toLogin', this.login)
      }
    },
    setLoading () {
      this.loading = false
    },

    sendCode () {
      if (this.sendable) {
        this.sendable = false
        // 发请求，请求回来200开始倒计时
        if (validatePhone(this.login.phone)) {
          this.$emit('getCode', this.login.phone)
        } else {
          this.$toast('请输入正确的手机号码！')
          this.$refs['phone'].focus()
          this.sendable = true
        }
      }
    },
    setCodeStatus (status) {
      if (status) {
        this.codeStr = `已发送（${this.count}s）`
        this.timer = setInterval(() => {
          this.count--
          if (this.count > 0) {
            this.codeStr = `已发送（${this.count}s）`
          } else {
            clearInterval(this.timer)
            this.sendable = true
            this.codeStr = '重新发送'
            this.count = 60
          }
        }, 1000)
      } else {
        clearInterval(this.timer)
        this.sendable = true
        this.codeStr = '重新发送'
        this.count = 60
      }
    },

    changeType () {
      if (this.login.type === '1') {
        this.login.type = '2'
      } else {
        this.login.type = '1'
      }
    }
  },
  props: ['checks'],
  created () {
  }
}
</script>

<style scoped>
  .top{
    padding: 50px 0;
    text-align: center;
  }
  .top .title{
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    line-height: 30px;
    color: #1E1E1E;
  }
  .top .des{
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 34px;
    color: rgba(102,102,102,1);
  }
  .van-cell.van-field{
    padding-left: 0;
    margin-top: 16px;
  }
  .van-divider{
    margin: 0;
  }
  .btn{
    margin-top: 53px;
  }
  .radio{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(30,30,30,1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 36px;
  }
  .radio .radio-item{
    display: flex;
    align-items: center;
    height: 21px;
  }
  .radio .radio-box{
    width: 16px;
    height: 16px;
    border: 1px solid #707070;
    box-sizing: border-box;
  }
  .radio span{
    margin-left: 6px;
  }
  .van-cell:not(:last-child)::after{
    display: none;
  }
</style>
